page-team-details {
  //头部
  ion-header {
    //取消全局的 顶部box-shadow
    box-shadow: none !important;
    ion-navbar {
      @extend %toolbarBackground;
      padding-bottom: 1.7rem !important;
      //icon 按钮
      ion-buttons {
        & > button {
          height: 3.25rem !important;
        }
        @extend %spanButtonInner;
        &:first-of-type {
          margin-left: 1.5rem;
        }
        &:last-of-type { 
          margin-right: 1.2rem;
        }
        .button-inner {
          margin-top: 0.5rem !important;
        }
      }

      //标题
      @extend %ionTitle;
    }
  }

  ion-content {
    //
    .details-content {
      display: inline-block;
      width: 100%;
      height: 14rem;
      color: $color-light;
      text-align: center;
      //团队头像
      img {
        position: absolute;
        left: 50%;
        margin-left: -17.15rem;
        width: 34.3rem;
        height: 14rem;
        z-index: -1;
      }
      span {
        padding-left: 0.8rem;
        display: inline-block;
        margin-top: 5.8rem;
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
      }
      p {
        margin-top: 0.1rem;
        span {
          margin-top: 0;
          font-size: 2rem;
        }
      }
    }

    //团队成员
    .team-member-line {
      margin-top: 3.6rem;
      text-align: left;
      div {
        text-align: center;
      }
      span {
        margin-left: 1.2rem;
        display: inline-block;

        font-size: 1.8rem;
        font-family: $font-family-team;
        color: $color-gray;
        font-weight: 600;
      }
    }

    //团队成员行
    .team-member {
      display: flex;
      margin-top: 0.9rem;
      margin-left: 1.6rem;

      flex-flow: row nowrap;
      overflow-x: auto;
      width: 35.9rem;
      & > div {
        position: relative;
        width: 5.4rem;
        margin-right: 2.4rem;
        text-align: center;
        flex: none;
        touch-action: initial !important;
        img {
          width: 5.4rem;
          height: 5.4rem;
          border-radius: 50%;
          display: inline-block;
        }
        span {
          color: #a1a1b2;
          font-size: 1.4rem;
        }
      }
      //删除按钮
      & > div > div{
        position: absolute;
        right: 0rem;
        top: 0;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%; 
        background: red;
        // animation: toggle 1s; 
        animation-iteration-count: infinite;
        content: '';
      }
      & > div> div::after{
        position: absolute;
        right: 0;
        top: 0;
        width: 1.6rem;
        color: #fff;
        content: '—';
      }
    }
    //项目
    .project {
      //盒子崩塌
      overflow: hidden;
      margin-top: 2.3rem;
      .span-start {
        float: left;
        margin-left: 1.2rem;
        margin-top: 0.3rem;
        font-size: 1.8rem;
        font-family: $font-family-team;
        font-weight: 600;
        color: $color-gray;
      }
      button {
        position: relative;
        //创建评测 按钮
        margin: 0;
        padding: 0;
        width: 10rem;
        height: 3rem;
        margin-left: 17.1rem;
        color: $color-light;

        border-radius: 2rem;
        background-image: linear-gradient(to right, #7c7bf8, #5aa9fc);
        background-size: 100%;
        background-repeat: no-repeat;
        ion-icon {
          position: absolute;
          top: 0.7rem;
          left: 0.7rem;
          font-size: 1.6rem;
        }
        .ion-ios-add2::before {
          font-size: 1.6rem;
        }

        span span {
          position: absolute;
          top: .7rem;
          left: 2.7rem;
          font-size: 1.6rem;
        }
      }
    }

    //评测项目
    ion-list {
      margin-top: 0.9rem !important;
      margin-bottom: 7.1rem !important;
      ion-item {
        // padding-left: 1.4rem !important;
        // padding-bottom: 0.9rem !important;
        padding: 0 1.6rem .9rem 1.4rem !important;
        font-size: 1.4rem !important;
        border: none !important;
        p {
          color: $button-ios-text-color !important;
        }
        ion-thumbnail {
          width: 8rem !important;
          height: 8rem !important;
          margin-top: 0 !important;
          border-radius: 0.5rem;
          img {
            width: 8rem !important;
            height: 8rem !important;
            border-radius: 0.5rem;
          }
        }
        .item-inner {
          position: relative;
          margin-left: 1.4rem;
          padding: 0 !important;
        }
        //文字
        ion-label {
          height: 100%;
          font-family: $font-family-team;
          span:first-of-type {
            margin-top: 1.3rem !important;
            display: inline-block;
            font-size: 1.6rem;
            color: $color-gray;
            //时间
            & ~ p {
              margin-top: 0.8rem;
              font-size: 1.4rem;
              color: rgb(165, 166, 168) !important;
            }
          }
        }
      }
    }

    //加入团队按钮
    @include publicButton(0 auto 1.2rem 3.8rem);
  }

  @keyframes toggle
  {
    0%{
      right: .1rem;
    }
    25%{
      right: 0rem;
    }
    50%{
      right: -.1rem;
    }
    75%{
      right: 0rem;
    }
  }
}
